<template>
	<view class="mine-back">
		<view class="top-bar">
			<view class="mine-title">我的</view>
			<image class="set-img" src="/static/icons/u4801.png" mode=""></image>
		</view>

		<view class="card-background">
			<view class="card">
				<image src="/static/icons/tx.jpg" class="card-image"></image>
				<text class="card-name">王强</text>
				<text class="card-age">男 28岁</text>
				<view class="tag-title flex-end">
					<span class="tag-left ">本人</span>
					<span class="tag-right ">已签约</span>
				</view>

				<button class="item-button">切换家庭成员</button>
			</view>
		</view>
	</view>
	<view class="serve">

		<view class="serve-list">
			<view class="view-image flex-end" style="background-color: #2984f819;">
				<image src="/static/qy.png" mode=""></image>
			</view>
			<span>签约记录</span>
			<view class="image-right">
				<image src="/static/right.png" mode=""></image>
			</view>
		</view>


		<view class="serve-list">
			<view class="view-image flex-end" style="background-color: #fa746b19;">
				<image src="/static/cy.png" mode=""></image>
			</view>
			<span>家庭成员管理</span>
			<navigator url="/familymembers/pages/familymemberdetailsmanage/familymemberdetailsmanage">
				<view class="image-right">
					<image src="/static/right.png" mode=""></image>
				</view>
			</navigator>
			
		</view>

		<view class="serve-list">
			<view class="view-image flex-end" style="background-color:#fddb7833;">
				<image src="/static/jk.png" mode=""></image>
			</view>
			<span>我的健康档案</span>
			<view class="image-right">
				<image src="/static/right.png" mode=""></image>
			</view>
		</view>

		<view class="serve-list">
			<view class="view-image flex-end" style="background-color: #6c76f419;">
				<image src="/static/jc.png" mode=""></image>
			</view>
			<span>我的健康检测</span>
			<view class="image-right">
				<image src="/static/right.png" mode=""></image>
			</view>
		</view>


		<view class="serve-list">
			<view class="view-image flex-end" style="background-color: #28d09419;">
				<image src="/static/ys.png" mode=""></image>
			</view>
			<navigator url="/nearbyinstitutions/pages/nearbyteam/nearbyteam">
				<span>我的医生团队</span>
				<view class="image-right">
					<image src="/static/right.png" mode=""></image>
				</view>
			</navigator>
		</view>


		<view class="serve-list">
			<view class="view-image flex-end" style="background-color: #2984f819;">
				<image src="/static/fw.png" mode=""></image>
			</view>
			<span>我的服务包</span>
			<view class="image-right">
				<image src="/static/right.png" mode=""></image>
			</view>
		</view>

		<view class="serve-list">
			<view class="view-image flex-end" style="background-color: #fddb7819;">
				<image src="/static/sc.png" mode=""></image>
			</view>
			<span>我的收藏</span>
			<view class="image-right">
				<image src="/static/right.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>
<style scoped>
	.mine-back {
		background-color: rgba(242, 247, 251, 0.619607843137255);
		padding-left: 44rpx;
		padding-right: 44rpx;
		position: relative;
	}



	.top-bar {
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mine-title {
		display: block;
		color: #333;
		font-weight: 500;
		font-style: normal;
		font-size: 56rpx;
	}

	.set-img {
		width: 40rpx;
		height: 40rpx;
	}

	.card-background {
		width: 100%;
		/* height: 418rpx; */
		height: auto;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		/* 添加上下内边距，让内容和容器边缘有距离 */
		padding: 30rpx 0 0 0;
		/* 子元素之间的间距 */
		gap: 20rpx;
	}

	.card {
		width: 100%;
		height: 332rpx;
		border-radius: 24rpx;
		background-color: rgba(41, 132, 248, 1);
		box-shadow: 0px 5px 30px rgba(41, 132, 248, 0.298039215686275);
		padding: 40rpx 30rpx 30rpx 30rpx;
		margin-bottom: 30rpx;
		position: relative;
		/* 确保内容不会溢出 */
		overflow: hidden;
		/* 新增：让 width 包含 padding 和 border */
		box-sizing: border-box;
	}

	.card-image {
		width: 128rpx;
		height: 128rpx;
		border-radius: 15%;

	}

	.card-name {
		position: absolute;
		font-weight: 500;
		color: #FFFFFF;
		font-size: 48rpx;
		top: 40rpx;
		left: 200rpx;
	}

	.card-age {
		position: absolute;
		top: 120rpx;
		left: 200rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.807843137254902);
	}

	.tag-title {
		position: absolute;
		top: 60rpx;
		left: 320rpx;
		font-size: 24rpx;
		font-weight: 200;
		color: #fff;
		/* display: flex;*/
		/* 添加flex布局 */
		/*gap: 20rpx;*/
		/* 添加标签间距 */

	}

	.tag-left {
		display: block;
		width: 80rpx;
		height: 40rpx;
		background-color: rgba(250, 116, 107, 1);
		border-radius: 44rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.tag-right {
		display: block;
		width: 100rpx;
		height: 40rpx;
		background-color: rgba(40, 208, 148, 1);
		border-radius: 44rpx;
		text-align: center;
		line-height: 40rpx;
		margin-left: 20rpx;
	}

	.item-button {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		width: 200rpx;
		height: 64rpx;
		font-size: 26rpx;
		border-radius: 64rpx;
		color: #2984F8;

	}


	.serve {
		background-color: #FFFFFF;
		margin-left: 34rpx;
		margin-bottom: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}


	.serve-list {
		width: 710rpx;
		height: 112rpx;
		background-color: #fff;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		align-items: center;
	}

	.serve-list>span {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		margin-left: 20rpx;
		left: 90rpx;
	}

	.view-image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 16rpx;
		
	}

	.view-image>image {
		width: 28rpx;
		height: 28rpx;
	}

	.image-right>image {
		width: 14rpx;
		height: 24rpx;
		position: absolute;
		right: 30rpx;
	}
</style>